<template>
	<div class="user-list">
		<div style="margin: 20px 0">
			<el-button type="primary" @click="addData">添加每日一句</el-button>
		</div>
		<el-table :data="dataList" style="width: 100%">
			<el-table-column type="index" width="50" />
			<el-table-column prop="chContent" label="中文内容" />
			<el-table-column prop="enContent" label="英文内容" />
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column label="是否是今日创建">
				<template #default="scope">
					<el-tag
						:type="scope.row.isCurrentDay ? 'danger' : 'info'"
						>{{ scope.row.isCurrentDay ? "是" : "否" }}</el-tag
					>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" @click="updateData(scope.row)"
						>编辑</el-button
					>
					<el-button type="danger" @click="delData(scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			class="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="query.pageNum"
			:page-sizes="[10, 20, 30, 40]"
			:page-size="query.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		/>
		<el-dialog
			v-model="dialogInfo.visible"
			:title="dialogInfo.title"
			width="30%"
			:close-on-click-modal="false"
			:destroy-on-close="true"
		>
			<el-form
				ref="ruleFormRef"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="中文内容" prop="chContent">
					<el-input v-model="form.chContent" />
				</el-form-item>
				<el-form-item label="英文内容" prop="enContent">
					<el-input v-model="form.enContent" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)"
						>确定
					</el-button>
					<el-button @click="resetForm(ruleFormRef)">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { add, del, list, update } from "@/api/dailySentence";

import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const ruleFormRef = ref();

const total = ref(0);
const dataList = ref([]);
const dialogInfo = reactive({
	title: "添加每日一句",
	visible: false,
	type: 0,
});

const form = reactive({
	chContent: "",
	enContent: "",
	id: 0,
});

const query = reactive({
	pageSize: 10,
	pageNum: 1,
});

const rules = reactive({
	chContent: [{ required: true, message: "请输入中文内容", trigger: "blur" }],
	enContent: [{ required: true, message: "请输入英文内容", trigger: "blur" }],
});

onMounted(() => {
	getData();
});

const getData = async () => {
	try {
		const res = await list(query);
		dataList.value = res.result.list.map(ele => {
			const date = dayjs(ele.createTime).format("YYYY-MM-DD");
			return {
				...ele,
				createTime: date,
				isCurrentDay: date === dayjs(new Date()).format("YYYY-MM-DD"),
			};
		});
		total.value = res.result.count;
	} catch (err) {
		console.error(err);
	}
};

const handleSizeChange = newSize => {
	query.pageSize = newSize;
	getData();
};

const handleCurrentChange = newPage => {
	query.pageNum = newPage; // Reset to first page on size change
	getData();
};

const addData = () => {
	form.id = "";
	form.chContent = "";
	form.enContent = "";
	dialogInfo.type = 0;
	dialogInfo.title = "添加每日一句";
	dialogInfo.visible = true;
};

const updateData = row => {
	form.id = row.id;
	form.chContent = row.chContent;
	form.enContent = row.enContent;
	dialogInfo.type = 1;
	dialogInfo.title = "修改每日一句";
	dialogInfo.visible = true;
};

const submitForm = async formEl => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			if (!dialogInfo.type) {
				await add({
					chContent: form.chContent,
					enContent: form.enContent,
				});
				ElMessage.success("添加成功");
				resetForm(ruleFormRef.value);
				getData();
				return;
			}

			await update(form);
			ElMessage.success("修改成功");
			resetForm(ruleFormRef.value);
			getData();
		}
	});
};

const delData = async row => {
	await del({
		id: row.id,
	});
	ElMessage.success("删除成功");
	getData();
};

const resetForm = formEl => {
	if (!formEl) return;
	formEl.resetFields();
	dialogInfo.visible = false;
};
</script>
